<template>
    <div class="company-container" v-loading="loading">
      <div v-show="kind==='tip'">
        <el-card class="box-card">
          <p>
            用户尚未完善企业信息，请先完善企业信息
          </p>
          <el-button @click="inEdit=true" type="primary">完善企业信息</el-button>
        </el-card>
      </div>
      <div v-show="kind==='edit'">
        <company-edit ref="companyEdit" :company-info="localCompanyInfo" @submitEdit="submitEdit" @cancelEdit="cancelEdit"></company-edit>
      </div>
      <div v-show="kind==='show'">
        <company-show></company-show>
        <el-button class="btn-go-edit" @click="goEdit" type="primary">编辑</el-button>
      </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
  import CompanyEdit from './subs/CompanyEdit.vue';
  import CompanyShow from './subs/CompanyShow.vue';
  import * as actionTypes from '../../constants/action-types';
    export default {
        name: 'Company',
        components: {
          CompanyEdit,
          CompanyShow
        },
        created(){
          this.fetchData();
        },
        data() {
            return {
              inEdit:false,
              loading: false,
            }
        },
        computed:{
          kind: function(){
            // tip, edit, show
            if(this.inEdit){
              return 'edit';
            }
            return (this.$store.state.companyInfo&&this.$store.state.companyInfo.name)?'show':'tip';
          },
          companyInfo:function(){
            return this.$store.state.companyInfo;
          },
          localCompanyInfo(){
            let local = {}
            if(this.$store.state.companyInfo){
              local = {...local,...this.$store.state.companyInfo}
            }
            return local;
          },
//          ...mapState({
//            companyInfo: state=>state.mockApi.companyInfo,
//          })
        },
        methods:{
          fetchData(){
            let me =this;
            me.loading=true;
            this.$store.dispatch(actionTypes.GET_COMPANYINFO).then(()=>{
              me.loading=false
            }).catch(() => {
              me.loading=false
            })
          },
          goEdit(){
            this.inEdit=true
            this.$refs['companyEdit'].initStep();
          },
          submitEdit(newCompanyInfo){
            let me =this;
            me.loading=true
            this.$store.dispatch(actionTypes.EDIT_COMPANYINFO, newCompanyInfo).then(()=>{
              me.inEdit=false;
              me.loading=false
            }).catch(() => {
              me.loading=false;
            })
          },
          cancelEdit(){
            this.inEdit=false;
          }
        },
    }
</script>

<style lang="stylus" scoped>
  .btn-go-edit
    margin-top: 15px
</style>
